<template>
  <div :class="classes" @click="handleClick">
    <span :class="tagCont">
      <span class="tag-dot-default" v-if="dot && dotType === 'default'">
        <span class="tag-dot-inner"></span>
      </span>
      <span class="tag-dot-solid" v-if="dot && dotType === 'solid'"></span>
      <span class="tag-dot-hollow" v-if="dot && dotType === 'hollow'">
        <span class="tag-dot-inner"></span>
      </span>
      <span><slot></slot></span>
      <span class="tag-divide" v-if="divide && closeabled"></span>
      <span v-if="closeabled" :class="['ani-tag-close fa fa-times', typeClose]" @click.stop="handleClose"></span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'AniTag',
  props: {
    // 类型
    type: {
      type: String,
      default: 'default'
    },
    // 尺寸
    size: {
      type: String,
      default: 'normal'
    },
    // 边框
    border: Boolean,
    // 填充
    fill: Boolean,
    // 分割线
    divide: Boolean,
    // 圆点
    dot: Boolean,
    // 圆角
    round: Boolean,
    // 可关闭
    closeabled: Boolean,
    // 边框样式
    borderStyle: {
      type: String,
      default: 'solid'
    },
    // 圆点样式
    dotType: {
      type: String,
      default: 'default'
    }
  },
  data () {
    return {
      tagCont: `ani-tag-content`
    }
  },
  computed: {
    tagRound () {
      return this.round ? `ani-tag-round` : ''
    },
    tagSize () {
      return this.size ? `ani-tag-${this.size}` : ''
    },
    tagType () {
      return this.type ? `ani-tag-${this.type}` : ''
    },
    tagborder () {
      if (this.border) {
        let str = !this.type ? '' : `${this.type}-`
        return `ani-tag-${str}border`
      } else {
        return ''
      }
    },
    tagFill () {
      return this.fill ? `ani-tag-${this.type}-fill` : null
    },
    typeClose () {
      if (this.closeabled && this.type === '') {
        return ''
      } else {
        return `ani-tag-${this.type}-close`
      }
    },
    tagDivide () {
      return this.divide ? `ani-tag-${this.type}-divide` : null
    },
    tagDot () {
      return this.dot ? `ani-tag-${this.type}-dot` : null
    },
    closeClasses () {
      return [`ani-tag-close fa fa-times`, this.typeClose]
    },
    cursorCls () {
      return this.$listeners.click ? 'cursor-pointer' : 'cursor-default'
    },
    classes () {
      return [
        `ani-tag`, this.tagSize, this.tagType,
        this.tagborder, this.tagFill, this.tagDot,
        this.cursorCls, this.tagRound, `tag-border-${this.borderStyle}`
      ]
    }
  },
  mounted () {},
  methods: {
    handleClose (evt) {
      this.$emit('close', evt)
    },
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './ani-tag.styl'
</style>
